<template>
    <div>
        <el-main class="main" style="padding: 0">
            <el-row  class="one-cate" >
                <el-button @click="goBack" href="javascript:history.go(-1);" style="font-size: 18px;    color: #7f7f7f;" link >
                    <el-icon size="30" >
                        <ArrowLeft />
                    </el-icon>
                    返回上一页
                </el-button>
                <ul class="tabs">
                    <li v-if="false" :class="state.onecate=='superai'?'active':''" @click="handleClick('superai')">超算智能</li>
                    <li :class="state.onecate=='console'?'active':''" @click="handleClick('console')">控制台</li>
                </ul>
<!--                <el-tabs v-model="state.onecate" class="onecate-tabs" @tab-click="handleClick">-->
<!--                    <el-tab-pane label="超算智能" name="superai"></el-tab-pane>-->
<!--                    <el-tab-pane label="控制台" name="console"></el-tab-pane>-->
<!--                </el-tabs>-->
            </el-row>
            <!--                <el-link href="javascript:history.go(-1);" style="margin-bottom: 20px;">返回上一页</el-link>-->
            <el-row justify="center" class="ins-list">
                <el-col class="header-row" :xs="24" :sm="24" :md="24">
                    <el-tabs style="background: #f2f2f2;"
                        v-loading="state.loading.table"
                        :element-loading-text="$t('module.Loading')"
                        v-model="state.table.params.activeTab"
                        class="store-tabs"
                        @tab-change="onTabChange"
                    >
                        <el-tab-pane v-for="cat in state.table.category" :name="cat.id.toString()" :key="cat.id"
                                     :label="cat.title" class="store-tab-pane">
                            <template v-if="state.table.modules.length > 0">
                                <div class="goods" v-for="item in state.table.modules"
                                     :key="item.uid">
                                    <router-link :to="'/guideintro/'+item.id"
                                                 style="color:#333333;text-decoration: none;">
                                        <div @click="showInfo(item.uid)" class="goods-item suspension">
                                            <el-image
                                                loading="lazy"
                                                fit="contain"
                                                class="goods-img"
                                                :src="item.image ? fullUrl(item.image) :''"
                                            />
                                            <div class="goods-footer">
                                                <div class="goods-title">
                                                    {{ item.title }}
                                                </div>
                                                <div class="goods-data" v-if="false">
                                                    <span class="download-count" style="color:#7f7f7f">
                                                        作者：{{ item.author ? item.author : '-' }}
                                                    </span>
                                                    <span class="goods-price"
                                                          style="display: flex;align-items: center;">
                                                       <el-icon size="13"
                                                                style="margin-right: 10px;color:rgb(127, 127, 127)"><View/></el-icon>
                                                       <span style="color:#7f7f7f"> {{ item.views }}</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </router-link>
                                </div>
                            </template>
                            <el-empty v-else class="modules-empty" description="暂无数据"/>
                        </el-tab-pane>
                    </el-tabs>
                    <div style="display: flex;justify-content: center;padding: 20px 0;">
                        <el-pagination @nextClick="nextClick" @change="pageChange" @prev-click="prevClick"
                                       size="small"
                                       background
                                       layout="prev, pager, next"
                                       :page-size="15"
                                       :total="state.table.total"
                                       class="mt-4"
                        />
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </div>
</template>
<script setup lang="ts">
import {
    ArrowLeft
} from '@element-plus/icons-vue'
import {uuid} from '~/utils/random'
import {onMounted, reactive,onBeforeUnmount} from "vue";
import {instocate, instoLists} from '~/api/common'
import {fullUrl} from "~/utils/common";

// 定义修改 body 背景颜色的函数
const setBodyBackgroundColor = (color: string) => {
    document.body.style.backgroundColor = color;
};

import {View} from '@element-plus/icons-vue'
import {useRoute} from "vue-router";

const handleClick=(itemId:any)=>{
    state.onecate = itemId.toString();
    initTabcate()
}
const onTabChange = (itemId: any) => {
    state.table.params.activeTab = itemId.toString();
    whereMap.instocate_id = itemId.toString()
    whereMap.page = 1
    getinstoLists()
}
const instrutionsVisible = reactive(inject('instrutionsVisible', {showIntro: false}))
const state = reactive({
    loading: {
        buy: false,
        table: false,
        common: false,
        install: false,
        goodsInfo: false,
    },
    storeuuid:useRoute().params.id,
    dialog: {
        buy: false,
        pay: false,
        common: false,
        goodsInfo: false,
        baAccount: false,
    },
    table: {
        remark: '',
        total: 0,
        last_page: 1,
        per_page: 15,
        current_page: 1,
        modules: [],
        modulesEbak: [],
        category: [],
        onlyLocal: false,
        indexLoaded: false,
        params: {
            quickSearch: '',
            activeTab: '1',
        },
    },
    payInfo: {},
    goodsInfo: {},
    buy: {
        info: {},
        agreement: true,
    },
    common: {
        uid: '',
        moduleState: 0,
        quickClose: false,
        type: 'loading',
        dialogTitle: '',
        fileConflict: [],
        dependConflict: [],
        loadingTitle: 'init',
        loadingComponentKey: uuid(),
        waitInstallDepend: [],
        dependInstallState: 'none',
        disableConflictFile: [],
        disableDependConflict: [],
        disableParams: {},
        payType: 'wx',
    },
    sysVersion: '',
    installedModule: [],
    installedModuleUids: [],
    onecate:'console'
})
const showInfo = (item: any) => {

}
const goBack = () => {
    window.location.href = '/'+state.storeuuid;
    //window.history.back();
    //instrutionsVisible.showIntro = false
}
const nextClick = () => {
    whereMap.page = whereMap.page + 1
    getinstoLists()
}
const prevClick = () => {
    whereMap.page = whereMap.page - 1
    getinstoLists()
}
const pageChange = (currePage: any) => {
    whereMap.page = currePage
    getinstoLists()
}

let whereMap = reactive({'instocate_id': 1, page: 1})
const initTabcate = async () => {
    await instocate({'onecate': state.onecate,storeuuid:state.storeuuid}).then(res => {
        state.table.category = res.data
        const instocate_id = res.data ? res.data[0]['id'] : 0
        whereMap.instocate_id = instocate_id.toString()
        state.table.params.activeTab = instocate_id.toString()
        getinstoLists()
    })
}
const getinstoLists = () => {
    instoLists(whereMap).then((res) => {
        state.table.modules = res.data.data
        state.table.total = res.data.total
        state.table.last_page = res.data.last_page
        state.table.current_page = res.data.current_page
    })
}
onMounted(() => {
    initTabcate()
    setBodyBackgroundColor('#f2f2f2'); // 示例颜色
});
// 页面卸载时恢复默认背景颜色
onBeforeUnmount(() => {
    setBodyBackgroundColor(''); // 恢复默认
});
</script>
<style scoped lang="scss">
.ins-list{
    background: #f2f2f2;
    padding: 30px 113px;
}
.tabs {
    list-style: none;
    margin-left: 57px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7f7f7f;
    li {
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        cursor: pointer;
        position: relative;
        font-size: 18px;
        color: #7f7f7f;
        background-color: #fff;
        &::after {
            content: "";
            width: 0;
            height: 2px;
            background-color: #6293f3;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            transition: width .4s;
        }
    }
    li.active {
        color:#6293f3;
        &::after {
            width: 70%;
        }
    }
}
.one-cate{

    background: #ffffff;
    font-size:18px;
    height: 77px;
    color: #333333;
    box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.35);
    .onecate-tabs{
        font-size: 18px;
        margin-left: 57px;
    }
    :deep(.el-tabs__header){
        margin: 0;
        padding: 0;
    }
    :deep(.el-tabs__nav-wrap){
        display: flex;
        align-items: center;
        .el-tabs__nav{
            height: 70px;
            align-items: center;
        }
        .el-tabs__item{
            font-size: 18px;
        }
    }
    :deep(.el-tabs__nav-wrap::after) {
        height: 0;
    }
}

:deep(.el-tabs__active-bar) {
    height: 5px;
    border-radius: 10px;
}

:deep(.el-tabs__item) {
    font-weight: 800;
}

:deep(.el-tabs__header) {
    padding-left: 15px;
}

:deep(.el-tabs__content) {
    padding: 0 !important;
    margin-top: 15px;
}

.store-tab-pane {
    display: flex;
    flex-wrap: wrap;
}

.goods {
    display: flex;
    flex-wrap: wrap;
}

.goods-item {
    width: 250px;
    margin: 10px;
    padding-bottom: 40px;
    position: relative;
    border-radius: var(--el-border-radius-base);
    background-color: var(--el-fill-color-extra-light);
    cursor: pointer;
    box-shadow: var(--el-box-shadow-light);
}

.goods-img {
    border-radius: var(--el-border-radius-base);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 245px;
    height: 163.33px;
}

.modules-empty {
    width: 100%;
}

.goods-footer {
    display: block;
    overflow: hidden;
    padding: 10px 10px 0 10px;

    .goods-tag {
        min-height: 60px;
    }

    .goods-title {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-top: 6px;
        font-weight: 500;
        font-size: 16px;
    }

    .goods-data {
        display: flex;
        width: calc(100% - 20px);
        position: absolute;
        bottom: 0;
        align-items: baseline;
        padding: 10px 0;
        font-size: 14px;

        .download-count {
            color: var(--el-text-color-placeholder);
        }

        .goods-price {
            margin-left: auto;
        }

        .original-price {
            font-size: 13px;
            color: var(--el-text-color-placeholder);
            text-decoration: line-through;
        }

        .current-price {
            font-size: 16px;
            color: var(--el-color-danger);
            padding-left: 6px;
        }
    }
}

.el-tabs--border-card {
    border: none;
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-border-radius-base);
}

.el-tabs--border-card :deep(.el-tabs__header) {
    background-color: var(--ba-bg-color);
    border-bottom: none;
    border-radius: var(--el-border-radius-base);
}

.el-tabs--border-card :deep(.el-tabs__item.is-active) {
    border: 1px solid transparent;
}

.el-tabs--border-card :deep(.el-tabs__nav-wrap) {
    border-radius: var(--el-border-radius-base);
}

:deep(.store-tabs) .el-tabs__content {
    padding: 10px 10px;
    min-height: 350px;
}

/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:430px){
    .goods{
        width: 50%;
        flex: 1;
    }
    .ins-list{
        background: #f2f2f2;
        padding: 0;
    }
    .tabs{
        margin-left: 10px;
    }
    .goods-item {
        width: 168px;
        margin: 10px;
        padding-bottom: 40px;
        position: relative;
        border-radius: var(--el-border-radius-base);
        background-color: var(--el-fill-color-extra-light);
        cursor: pointer;
        box-shadow: var(--el-box-shadow-light);
    }

    .goods-img {
        border-radius: var(--el-border-radius-base);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        width: 100%;
        height: 100px;
        margin-top: 10px;
    }
}
</style>

